<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pv_uv</title>
    <script type="text/javascript" src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/static/js/Highcharts.js"></script>
    <script src="/static/js/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <style type="text/css">
        ${demo.css}

    </style>
</head>
<body>


<script type="text/javascript">
    var uv_li ={{ uv_li|safe }};
    var t_li ={{ time_list|safe }};
    var pv_li ={{ pv_li|safe }};

    $(document).ready(function () {
        // 字典 dict
        var auto = function () {
            $.getJSON('/pv_uv/', function (trn_list) {
                //返回值  在这里是一个数组
                //for (var i in ret) {console.log(ret[i]);}
                if (trn_list[0].length != uv_li.length) {
                    pu(trn_list[0], trn_list[1], trn_list[2]);
                    uv_li=trn_list[0];
                    console.log(trn_list[0],uv_li);

                }

            });
        };

        setInterval(auto, 10000);
    });

    function pu(uv_li, pv_li, t_li) {

        $(function () {
            $('#container11').highcharts({
                chart: {
                    type: 'area'
                },
                title: {
                    text: 'PV_UV实时展示'
                },
                subtitle: {
                    text: ' '
                },
                xAxis: {
                    categories: t_li,//['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: ' '
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                tooltip: {
                    split: true,
                    valueSuffix: ' 访问量 '
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [
                    {
                        name: 'PV',
                        data: pv_li//[2, 2, 2, 6, 13, 30, 46]
                    }, {
                        name: 'UV',
                        data: uv_li//[18, 31, 54, 156, 339, 818, 1201]
                    },]
            });
        });
    }
    pu(uv_li, pv_li, t_li)
</script>

<div id="container11" style="min-width:100%;height:700px"></div>
</body>
</html>